import React, { FC, useCallback, useRef } from 'react';
import { useSlate } from 'slate-react';
import { BaseRange, Editor } from 'slate';
import { message } from 'antd';

import {
  isBlockActive,
  isMarkActive,
  toggleMark,
  toggleBlock,
  isLinkActive,
  wrapLink,
  insertLink,
  unwrapLink,
  toggleIndent,
  ElementType,
  TextType,
} from '@/core';

import { IconsType, isUrl } from '../../share';
import { MenuIcon, DropDown } from '../../component';

import { MenuItemValues } from './data';

interface MenuElementProps {
  format: ElementType;
  icon: IconsType;
}

export const TodoButton: FC<MenuElementProps> = ({ format, icon }) => {
  const editor = useSlate();
  return (
    <>
      <MenuIcon type={icon} />
    </>
  );
};

export const BlockButton: FC<MenuElementProps> = ({ format, icon }) => {
  const editor = useSlate();
  return (
    <MenuIcon
      type={icon}
      active={isBlockActive(editor, format)}
      onMouseDown={(event: any) => {
        event.preventDefault();
        toggleBlock(editor, format);
      }}
    />
  );
};

interface HistoryButtonProps {
  type: 'redo' | 'undo';
}

export const HistoryButton: FC<HistoryButtonProps> = ({ type }) => {
  const editor = useSlate();
  const { undos, redos } = editor.history;
  return <MenuIcon type={type} iconValue={(type === 'redo' ? redos : undos).length ? 'black' : 'white'} onMouseDown={editor[type]} />;
};

interface IndentButtonProps {
  type: 'right' | 'left';
}

export const IndentButton: FC<IndentButtonProps> = ({ type }) => {
  const editor = useSlate();
  const onMouseDown = useCallback(() => toggleIndent(editor, type), []);
  return <MenuIcon type={type === 'left' ? 'indentLeft' : 'indentRight'} onMouseDown={onMouseDown} />;
};

export const LinkButton = () => {
  const editor = useSlate();
  const active = isLinkActive(editor);
  const onMouseButton = useCallback((event) => {
    const { selection } = editor;
    if (selection) {
      const text = Editor.string(editor, selection as BaseRange);
      if (isUrl(text)) {
        if (active) {
          unwrapLink(editor);
        } else {
          wrapLink(editor, text);
        }
      } else {
        event.preventDefault();
        const url = window.prompt('输入链接');
        if (url && isUrl(url)) {
          insertLink(editor, url);
        } else {
          message.warn('插入的不是 URL');
        }
      }
    }
  }, []);

  return <MenuIcon type="link" active={active} onMouseDown={onMouseButton} />;
};

interface MenuTextProps {
  format: TextType;
  icon: IconsType;
}

export const MarkButton: FC<MenuTextProps> = ({ format, icon }) => {
  const editor = useSlate();
  const colorRef = useRef<HTMLInputElement>(null);
  return (
    <>
      <MenuIcon
        type={icon}
        iconValue={MenuItemValues[format]}
        active={isMarkActive(editor, format)}
        onMouseDown={(event) => {
          event.preventDefault();
          toggleMark(editor, format, MenuItemValues[format]);
        }}
      ></MenuIcon>
      {(format === 'background' || format === 'color') && (
        <>
          <DropDown
            onMouseDown={() => {
              colorRef.current?.click();
            }}
          />
          <input
            ref={colorRef}
            type="color"
            value="#ff0000"
            onChange={(event) => {
              event.preventDefault();
              MenuItemValues[format] = event.target.value;
              toggleMark(editor, format, event.target.value);
            }}
            style={{
              visibility: 'hidden',
              width: 0,
              height: 0,
            }}
          ></input>
        </>
      )}
    </>
  );
};
